<template>
	<view class="community_content">
		<!-- 头部 -->
		<view>
			<view style="background-color: #FE9F59; text-align: left; padding: 20px; width: 200%;">
				<span style="color: aliceblue; ">{{ user.userName }} 你好，欢迎来到社区互动交流中心</span>
			</view>
			<u-notice-bar :text="tips" mode="closable"></u-notice-bar>
			<!-- <u-search placeholder="搜索社区发布内容" :showAction="false" v-model="keyword" @search="userSearch()" style="margin: 5px;"></u-search> -->
		</view>
		<!-- 内容卡片 -->
		<view v-for="card in testList" class="card" @click="userOpt(card.interactionId)">
			<!-- 帖子作者信息 -->
			<view style="height: 40px;">
				<span style="color: #FE9F59; font-size: 18px; float: left;">{{ card.userName }}</span>
				<span
					style="color: #838383; font-size: 8px; float: right; margin-top: 5px; margin-right: 5px;">{{ card.createTime }}</span>
			</view>

			<!-- 帖子具体内容 -->
			<view>
				{{ card.content }}
			</view>

			<!-- 评论总数 -->
			<view style="font-size: 16px; margin-top: 20px; color: #838383; height: 20px;">
				<!-- <hr style="border-top-color: #f0f0f0;" /> -->
				<view style="float: right; margin-right: 10px;">{{ card.commentCount }}</view>
				<u-icon name="chat" color="#838383" size="24" style="float: right;"></u-icon>
			</view>
		</view>
		<!-- 悬浮添加按钮 -->
		<view class="fab" @click="goToPost()">
			<u-icon name="edit-pen" size="24" color="white"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '欢迎来到社区互动交流中心，请各位业主文明发言，共同维护良好社区交流和网络环境！',
				// keyword: '',
				user: {
					userName: '张三'
				},
				testList: [
					{
						interactionId: 111,
						content: '这是测试内容1',
						userName: '张三',
						createTime: '2025-01-01 10:10:10',
						commentCount: 45
					},
					{
						interactionId: 222,
						content: '这是测试内容2',
						userName: '李四',
						createTime: '2025-01-02 11:11:10',
						commentCount: 77
					},
				]
			}
		},
		onLoad() {},
		onReachBottom() {

		},
		methods: {
			userSearch() {
				console.log('search: ', this.keyword)
			},
			userOpt(id) {
				console.log('opt id: ', id)
				uni.navigateTo({
					url: '/pages/community/CardDetail?id=' + id // 目标页面路径，可以带参数
				});
			},
			goToPost() {
				uni.navigateTo({
					url: '/pages/community/PostNew'
				});
			}

		}
	}
</script>

<style lang="scss">
	.card {
		margin: 10px;
		padding: 10px;
		// border: 1px solid #FE9F59;
		border-radius: 10px;
		box-shadow: 5px 5px 10px 0px #dfdfdf;
	}

	.fab {
		position: fixed;
		right: 20px;
		bottom: 80px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #ffaa00;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		opacity: 0.8;
	}
</style>